<template>
  <div>
    <!--1视图-->
    <input type="checkbox" v-model="hobby" value="抽烟">抽烟<br>
    <input type="checkbox" v-model="hobby" value="喝酒">喝酒额<br>
    <input type="checkbox" v-model="hobby" value="烫头">烫头<br>
    你选择的是:{{hobby}}<br>
    <button @click="qh">点击切换</button><br>
    <span v-if="flag">
      你好 Vue
    </span>
    <span v-if="!flag">
      你好 张三
    </span>
  </div>

</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      //2属性定义
      hobby:[],
      flag:true
    }
  }, methods: {
    //3自定义方法
    qh(){
      this.flag=!this.flag
    }
  }, created() {
    //4.钩子函数
    console.log("2.created")
  },beforeCreate() {
    console.log("1.beforeCreate")
  },beforeMount() {
    console.log("3.beforeMount")
  }
}
</script>

<style scoped>

</style>